<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>vdt template engine demo</title>
</head>
<body>
<script type="text/vdt" id="parent">
    <div className="card">
        <div className="head">{title}</div>
        <b:body>
            <div>parent body</div>
        </b:body>
        <b:footer>
            <div>parent footer</div>
            <b:nested>
                <div>parent nested footer</div>
            </b:nested>
        </b:footer>
    </div>
</script>

<script type="text/vdt" id="child">
    // You can also compile it in node, then require it by require.js
    var parent = Vdt.compile(document.getElementById('parent').innerHTML);
    <t:parent title="child card title">
        <b:body>
            <div>child body</div>
        </b:body>
        <b:footer>
            {parent()}
            <div>child footer</div>
            <b:child_nested>
                <div>child nested footer</div>
            </b:child_nested>
        </b:footer>
    </t:parent>
</script>

<script type="text/vdt" id="grandson">
    var _parent = Vdt.compile(document.getElementById('child').innerHTML);
    <t:_parent title="grandson card title">
        <b:body>
            <div>grandson body</div>
        </b:body>
        <b:child_nested>
            {parent()}
            <div>grandson footer</div>
            <t:_parent title="nested template">
            </t:_parent>
        </b:child_nested>
    </t:_parent>
</script>

<script type="text/javascript" src="../../dist/vdt.js"></script>
<script type="text/javascript">
    var child = Vdt(document.getElementById('child').innerHTML);
    document.body.appendChild(child.render());

    document.body.appendChild(document.createElement('hr'));

    var grandson = Vdt(document.getElementById('grandson').innerHTML);
    document.body.appendChild(grandson.render());
</script>
</body>
</html>